<template>
	<view>
		<cu-custom bgColor="bg-white">
			<block slot="content">首页</block>
		</cu-custom>
		<!-- <u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page> -->
		<!-- 主页 -->
		<view class="layout">
			<view class="viewbox" style="background-color: #fff;"></view>

			<!-- 头部 -->
			<view class="index_a" @click="navigate('/pages/serach/serach')">
				<view class="header_wrap">
					<view class="header_wrap_b">
						<input placeholder="搜索商品/课程" v-model="keyword"
							placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;" />
					</view>
					<view class="header_wrap_a">
						搜索
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="nav">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in 4">
						<image :src="bannerUrl" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 中间的 -->
			<view class="index_c">
				<!-- <u-scroll-list indicatorColor="#EFEFEF" indicatorActiveColor="#E71102"> -->
				<view class="index_cc">
					<view class="index_c_a" @click="goPage('/pages/goods/list')">
						<view class="index_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="index_c_a_b">测试中心</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/curriculum/list')">
						<view class="index_c_a_a">
							<image :src="index_2"></image>
						</view>
						<view class="index_c_a_b">商学院</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/user/user_vip',1)">
						<view class="index_c_a_a">
							<image :src="index_3"></image>
						</view>
						<view class="index_c_a_b">商城</view>
					</view>
					<view class="index_c_a" @click="goPage('/pages/tutor/vendor')">
						<view class="index_c_a_a">
							<image :src="index_4"></image>
						</view>
						<view class="index_c_a_b">导师</view>
					</view>
					<view class="index_c_a" @click="punchtheclock()">
						<view class="index_c_a_a">
							<image :src="index_5"></image>
						</view>
						<view class="index_c_a_b">会员</view>
					</view>
				</view>

				<!-- </u-scroll-list> -->
			</view>
			<!-- 测试中心 -->
			<view class="index_d">
				<view class="index_d_a">测试中心</view>
				<view class="index_d_b" @click="goPage('/pages/goods/vendor')">
					<view class="index_d_b_a">更多</view>
					<view class="index_d_b_b">
						<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
					</view>
				</view>
			</view>
			<!-- 测试 -->
			<view class="cindex_c">
				<view class="cindex_cc">
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">个人测试</view>
						<view class="cindex_c_a_b_b">了解你的个人特质等信息</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
						
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">匹配关系</view>
						<view class="cindex_c_a_b_b">了解匹配关系和相处模式</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">财富密码</view>
						<view class="cindex_c_a_b_b">获取财富密码和赚钱秘籍</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
					<view class="cindex_c_a" @click="goPage('/pages/goods/list')">
						<view class="cindex_c_a_a">
							<image :src="index_1"></image>
						</view>
						<view class="cindex_c_a_b">情欲蓝图</view>
						<view class="cindex_c_a_b_b">获取财富密码和赚钱秘籍</view>
						<view class="cindex_c_a_b_b_b">开始测试</view>
					</view>
				</view>
			</view>
			
			<!-- 商学院 -->
			<view class="index_d">
				<view class="index_d_a">商学院</view>
				<view class="index_d_b"  @click="goPage('/pages/goods/vendor')">
					<view class="index_d_b_a">更多</view>
					<view class="index_d_b_b">
						<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
					</view>
				</view>
			</view>
			
			

		</view>
	</view>
</template>

<script>
	import request from '../../common/request';
	import api from '../../common/apiService';
	const {
		getBanner,
		getRecommendList,
		getUserIntegral
	} = api;



	export default {
		data() {
			return {
				showLoading: true,
				goodslist: [],
				bannerUrl: '',
				bannerLink: '',
			}
		},
		onLoad() {
			this.loginfo()
		},
		mounted() {
			Promise.all([getBanner(), getRecommendList()])
				.then(([bannerData, recommendData]) => {
					console.log(recommendData);
					this.bannerUrl = bannerData ? bannerData[0].image : '';
					this.bannerLink = bannerData ? bannerData[0].link : 0;
					this.goodslist = recommendData?.list.map(item => ({
						...item,
						url: `/pages/goods/info?id=${item.id}`
					}));
				})
				.catch(error => {
					// console.log(error);
					uni.showToast({
						title: error.message || '请求失败，请稍后再试',
						icon: 'none'
					});
				})
				.finally(() => {
					this.showLoading = false;
				});
		},

		methods: {
			navigate(url, type = 0) {
				if (!this.isLogin && type === 1) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/wxrole'
						})
					}, 100)
					return;
				}
				uni.navigateTo({
					url
				});
			},
			loginfo() {

			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
	}

	.layout {
		background: #f4f5f7;

		.index_a {
			background-color: #FFFFFF;
			height: auto;
			width: 750rpx;
			overflow: hidden;
			padding: 25rpx;

			.header_wrap {
				width: 100%;
				height: 72rpx;
				border: 1rpx solid #D9D9D9;
				border-radius: 34rpx;

				.header_wrap_b {
					width: 480rpx;
					height: 68rpx;
					float: left;
					margin-left: 20rpx;

					input {
						width: 480rpx;
						height: 68rpx;
						line-height: 68rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}
				}

				.header_wrap_a {
					width: 120rpx;
					height: 64rpx;
					border: 1px solid red;
					float: right;
					background: #ff3621;
					color: #FFFFFF;
					box-sizing: border-box;
					border-radius: 30rpx;
					padding: 10rpx 0 0 32rpx;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: normal;
					// margin-top: 15rpx;
					// margin-left: 30rpx;
					// margin-right: 15rpx;
				}
			}
		}

		.nav {
			width: 750rpx;
			// border: 1px solid red;
			// padding: 30rpx 0;

			swiper {
				width: 750rpx;
				height: 750rpx;
				// border: 1px solid red;

				swiper-item {
					width: 100%;
					height: 100%;
					// border: 1px solid red;
					// padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}

		// 中间
		.index_c {
			width: 700rpx;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin: auto;
			margin-top: 20rpx;
			padding: 30rpx;
			// overflow-y: auto;	

			.index_cc {
				min-width: 896rpx;
				overflow: hidden;

				.index_c_a {
					width: 128rpx;
					overflow: hidden;
					float: left;

					.index_c_a_a {
						width: 80rpx;
						height: 80rpx;
						margin: auto;
						background-color: #cccccc;
						border-radius: 50%;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}

					.index_c_a_b {
						font-size: 28rpx;
						font-weight: normal;
						letter-spacing: 0px;
						line-height: 36rpx;
						color: #333333;
						text-align: center;
						vertical-align: top;
						margin-top: 20rpx;
					}


				}
			}
		}

		// 测试
		.index_d {
			height: 80rpx;
			line-height: 80rpx;
			width: 700rpx;
			margin: auto;
			margin-top: 20rpx;
			overflow: hidden;

			.index_d_a {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #333333;
				float: left;
			}

			.index_d_b {
				float: right;

				.index_d_b_a {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					float: left;
				}

				.index_d_b_b {
					width: 30rpx;
					height: 30rpx;
					float: left;
					margin-top: 31rpx;
				}
			}
		}



		// 下面的
		// 中间
		.cindex_c {
			width: 700rpx;
			height: auto;
			background: #f4f5f7;
			border-radius: 12rpx;
			margin: auto;
			margin-top: 20rpx;
			padding: 30rpx;
			overflow-y: auto;	

			.cindex_cc {
				min-width: 1148rpx;
				overflow: hidden;

				.cindex_c_a {
					background: #ffffff;
					border-radius: 20rpx;
					width: 252rpx;
					height: 272rpx;
					margin-right: 15rpx;
					// border: 1px solid red;
					overflow: hidden;
					float: left;

					.cindex_c_a_a {
						width: 80rpx;
						height: 80rpx;
						margin: auto;
						margin-top: 10rpx;
						background: #cccccc;
						border-radius: 50%;
						
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}

					.cindex_c_a_b {
						font-size: 28rpx;
						font-weight: normal;
						letter-spacing: 0px;
						line-height: 36rpx;
						color: #333333;
						text-align: center;
						vertical-align: top;
						margin-top: 20rpx;
					}
					.cindex_c_a_b_b {
						font-family: Source Han Sans;
						// border: 1px solid red;
						color: #c2c2c2;
						font-size: 20rpx;
						width: 240rpx;
						margin: 10rpx 0 0 10rpx;
						height: 36rpx;
					}
					
					.cindex_c_a_b_b_b {
						width: 144rpx;
						height: 56rpx;
						border: 1px solid #06443A;
						border-radius: 20rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						margin: 10rpx 0 0 50rpx;
						padding: 10rpx 0 0 21rpx;
					}


				}
			}
		}
	}
</style>